<template>
    <!-- 查询条件区域 -->
    <div class="search-container">
        <el-form :model="searchForm" inline>
            <el-form-item label="出入库状态">
                <el-select v-model="searchForm.outIn" placeholder="请选择状态" clearable style="width: 180px;"> 
                    <el-option label="全部" :value="null" />
                    <el-option label="出库" :value="1" />
                    <el-option label="入库" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="物料群组名称">
                <el-input v-model="searchForm.materialGroupName" placeholder="请输入物料群组名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="60" />
        <el-table-column prop="outInCode" label="出入库编号" width="150" />
        <el-table-column prop="outIn" label="类型" width="100">
            <template #default="scope">
                <el-tag :type="scope.row.outIn === 1 ? 'danger' : 'success'">
                    {{ scope.row.outIn === 1 ? '出库' : '入库' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="outInCount" label="数量" width="120" />
        <el-table-column prop="materialGroupCode" label="物料群组编号" width="150" />
        <el-table-column prop="materialGroupName" label="物料群组名称" width="180" />
        <el-table-column prop="createrPeople" label="操作人" width="120" />
        <el-table-column prop="createTime" label="操作时间" width="180">
            <template #default="scope">
                {{ formatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize" :page-sizes="[5, 10, 20, 30]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([]);

// 分页参数
const page = reactive({
    PageIndex: 1,
    PageSize: 5,
    totalcount: 0
});

// 查询表单
const searchForm = reactive({
    outIn: null, // 出入库状态(1=出库,2=入库)
    materialGroupName: '' // 物料群组名称
});

/**
 * 格式化日期
 * @param dateString 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateString: string) => {
    if (!dateString) return '';
    return moment(dateString).format('YYYY-MM-DD HH:mm:ss');
};

/**
 * 获取群组出入库记录列表
 * 调用后端API获取群组物料的出入库记录
 */
const getGroupOutInRecords = async () => {
    try {
        // 构建查询参数
        const params = {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            OutIn: searchForm.outIn, // 出入库状态
            ...searchForm
        };

        // 调用后端接口
        const response = await axios.get('/api/ProductionModules/GetGroupOutIn', { params });

        if (response.data.code === 200) {
            // 设置表格数据
            tableData.value = response.data.totalPage || [];
            // 设置总记录数
            page.totalcount = response.data.totalcount || 0;
        } else {
            ElMessage.error(response.data.message || '获取数据失败');
        }
    } catch (error) {
        console.error('获取群组出入库记录失败:', error);
        ElMessage.error('获取数据失败，请重试');
    }
};

/**
 * 查询按钮点击事件
 * 重置页码并重新获取数据
 */
const handleSearch = () => {
    page.PageIndex = 1; // 重置到第一页
    getGroupOutInRecords();
};

/**
 * 重置按钮点击事件
 * 清空查询条件并重新获取数据
 */
const handleReset = () => {
    // 重置查询条件
    searchForm.outIn = null;
    searchForm.materialGroupName = '';

    // 重置分页
    page.PageIndex = 1;

    // 重新获取数据
    getGroupOutInRecords();
};

/**
 * 分页大小变化事件
 * @param size 新的页面大小
 */
const handleSizeChange = (size: number) => {
    page.PageSize = size;
    page.PageIndex = 1; // 重置到第一页
    getGroupOutInRecords();
};

/**
 * 当前页变化事件
 * @param current 新的当前页
 */
const handleCurrentChange = (current: number) => {
    page.PageIndex = current;
    getGroupOutInRecords();
};

// 组件挂载时获取数据
onMounted(() => {
    getGroupOutInRecords();
});
</script>

<style scoped>
/* 查询容器样式 */
.search-container {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 表格样式优化 */
.el-table {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* 分页样式 */
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .search-container {
        padding: 15px;
    }

    .el-form--inline .el-form-item {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>
